<template>
  <div class="home-container">
     <!-- 走马灯区域 -->
     <el-carousel height="460px">
      <el-carousel-item>
        <img src="../../assets/banner1.jpeg" alt="">
      </el-carousel-item>
      <el-carousel-item>
        <img src="../../assets/banner2.jpeg" alt="">
      </el-carousel-item>
      <el-carousel-item>
        <img src="../../assets/banner3.jpeg" alt="">
      </el-carousel-item>
      <el-carousel-item>
        <img src="../../assets/banner4.jpeg" alt="">
      </el-carousel-item>
    </el-carousel>

    <!-- 内容区域 -->
    <div class="content">
         <p class="title">我们可以为您带来什么？</p>
         <div class="list">
             <div class="every-item" v-for="(item,index) in lists" :key="index">
               <img :src="item.img" alt="">
               <p>{{ item.title }}</p>
               <p>{{ item.desc }}</p>
             </div>
         </div>
         <!-- 注册区域 -->
         <div class="reg-box">
          <div class="white-box">
            <p>即刻注册</p>
            <p>领取新人礼包</p>
            <i class="el-icon-caret-bottom"/>
          </div>
          <div class="gray-box">
          </div>
          <!-- 登录注册框 -->
          <el-card class="box-card">
            <el-form ref="form" :model="formModel">
              <el-form-item>
                 <div class="head">
                    <img src="../../assets/applogo.png" alt="">
                    <p class="title-app">百路汇爱车联盟</p>
                 </div>
              </el-form-item>
              <el-form-item label="手机号" label-width="70px">
                <!-- placeholder="请输入您的手机号" -->
                <el-input v-model="formModel.phone" placeholder="请输入您的手机号">
                  <!-- <span class="phone-text" slot="prefix">手机号</span> -->
                </el-input>
              </el-form-item>
              <el-form-item label="验证码" label-width="70px">
                <el-input v-model="formModel.code" placeholder="请输入验证码">
                  <el-button slot="append" type="info">获取验证码</el-button>
                </el-input>
              </el-form-item>
              <el-form-item>
                <div class="btn">
                  <el-button type="primary" size="large">立即加入</el-button>
                </div>
              </el-form-item>
            </el-form>
          </el-card>
         </div>
         
         <!-- 合作单位 -->
         <div class="cooperate-box">
              <p class="title">合作伙伴</p>
              <!-- 公司区域 -->
              <div class="list-box">
                <img src="../../assets/partner.png" alt="">
                <p>友情链接 <button @click="$router.push('/bailuxi')">百路喜</button></p>
              </div>
         </div>

         
    </div>

  </div>
</template>

<script>
export default {
  name: 'homeIndex',
  data() {
    return {
      lists: [
         {num: '01',img: require('@/assets/list-01.png'), title:'边开车边养护',desc:'时刻让爱车保持最佳状态'},
         {num: '02',img: require('@/assets/list-02.png'),title:'保养不花钱',desc:'解决您后顾之忧'},
         {num: '03',img: require('@/assets/list-03.png'),title:'轻松过环检',desc:'无需“黄牛”省心又省事'},
         {num: '04',img: require('@/assets/list-04.png'),title:'巅峰驾驶体验',desc:'提速更快，动力更持久'},
         {num: '05',img: require('@/assets/list-05.png'),title:'环保奖励',desc:'赚原本赚不到的利润'},
         {num: '06',img: require('@/assets/list-06.png'),title:'智慧车生活',desc:'减少能源浪费，出行更便捷'}
     ],
     formModel: {
        phone: '',
        code: '',
    }
    }
  },
}
</script>

<style lang="less" scoped>
   .home-container{
     .el-carousel{
       img{
         width: 100%;
         height: 460px;
      }
    }

    .content{
      display: flex;
      flex-direction: column;
      align-items: center;
      .title{
        height: 150px;
        line-height: 150px;
        text-align: center;
        font-family: \\5FAE\8F6F\96C5\9ED1;
        font-size: 30px;
        letter-spacing: 2px;
        color: #333;
      }

      .list{
        width: 60%;
        display: flex;
        flex-wrap: wrap;
        .every-item{
          padding: 15px 0;
          width: 33.33%;
          display: flex;
          flex-direction: column;
          align-items: center;

          &:nth-child(1){
             border-bottom: 1px solid #abaaaa;
          }
          &:nth-child(2){
              border-left: 1px solid #abaaaa;
              border-right: 1px solid #abaaaa;
              border-bottom: 1px solid #abaaaa;
          }
          &:nth-child(3){
             border-bottom: 1px solid #abaaaa;
          }
          &:nth-child(5){
            border-left: 1px solid #abaaaa;
            border-right: 1px solid #abaaaa;
          }


          
          img{
            width: 60px;
            height: 60px;
          }
          p{
            margin-top: 3px;
            color: #333;
            font-size: 16px;
          }
         
        }
      }
      .reg-box{
        position: relative;
        width: 100%;
        
        .white-box{
          padding-top: 20px;
          height: 230px;
          display: flex;
          flex-direction: column;
          align-items: center;
          color: #333;
          font-size: 16px;
          i{
            font-size: 30px;
          }
        }
        .gray-box{
           height: 220px;
           background-color: #f1f1f1;
        }
        .box-card{
           padding: 0 22px;
           width: 400px;
           height: 320px;
           position: absolute;
           top: 110px;
           left: 50%;
           transform: translateX(-50%);

           .head{
             display: flex;
             flex-direction: column;
             align-items: center;
             img{
              width: 50px;
              height: 50px;
            }
            .title-app{
               color: #000;
               font-size: 16px;
            }
          }
          .phone-text{
             color: #606266;
             font-size: 14px;
             margin-right: 10px;
          }

          .btn{
             width: 100%;
             display: flex;
             justify-content: center;
             .el-button{
               width: 80%;
               border: none;
               background-color: #e70012;
            }
          }
        }
        
      }

      .cooperate-box{
        display: flex;
        flex-direction: column;
        align-items: center;
         .title{
           margin-top: 20px;
           color: #333;
           font-size: 30px;
        }
        .list-box{
           width: 75%;
           img{
            width: 100%;
           }  
           p{
            margin: 20px 50px;
            font-size: 20px;
            color: #000;
            letter-spacing: 2px;
            button{
              color: #0095de;
              font-size: 20px;
              letter-spacing: 2px;
            }
          }
        }
      }


   
    }
   }
</style>